/* ==================
          阴影
 ==================== */
.shadow[class*='white'] {
    --ShadowSize: 0 1rpx 6rpx;
}

.shadow-large {
    --ShadowSize: 0rpx 40rpx 100rpx 0rpx;
}

.shadow-warp {
    position: relative;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.shadow-warp:before,
.shadow-warp:after {
    position: absolute;
    content: '';
    top: 20rpx;
    bottom: 30rpx;
    left: 20rpx;
    width: 50%;
    box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
    transform: rotate(-3deg);
    z-index: -1;
}

.shadow-warp:after {
    right: 20rpx;
    left: auto;
    transform: rotate(3deg);
}

.shadow-blur {
    position: relative;
}

.shadow-blur::before {
    content: '';
    display: block;
    background: inherit;
    filter: blur(10rpx);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 10rpx;
    left: 10rpx;
    z-index: -1;
    opacity: 0.4;
    transform-origin: 0 0;
    border-radius: inherit;
    transform: scale(1, 1);
}

.shadow {
    box-shadow: var(--ShadowSize) var(--greyShadow);
}

.shadow[class*='-red'] {
    box-shadow: var(--ShadowSize) var(--redShadow);
}

.shadow[class*='-orange'] {
    box-shadow: var(--ShadowSize) var(--orangeShadow);
}

.shadow[class*='-yellow'] {
    box-shadow: var(--ShadowSize) var(--yellowShadow);
}

.shadow[class*='-olive'] {
    box-shadow: var(--ShadowSize) var(--oliveShadow);
}

.shadow[class*='-green'] {
    box-shadow: var(--ShadowSize) var(--greenShadow);
}

.shadow[class*='-darkgreen'] {
    box-shadow: var(--ShadowSize) var(--darkgreenShadow);
}

.shadow[class*='-cyan'] {
    box-shadow: var(--ShadowSize) var(--cyanShadow);
}

.shadow[class*='-blue'] {
    box-shadow: var(--ShadowSize) var(--blueShadow);
}

.shadow[class*='-purple'] {
    box-shadow: var(--ShadowSize) var(--purpleShadow);
}

.shadow[class*='-mauve'] {
    box-shadow: var(--ShadowSize) var(--mauveShadow);
}

.shadow[class*='-pink'] {
    box-shadow: var(--ShadowSize) var(--pinkShadow);
}

.shadow[class*='-brown'] {
    box-shadow: var(--ShadowSize) var(--brownShadow);
}

.shadow[class*='-grey'] {
    box-shadow: var(--ShadowSize) var(--greyShadow);
}

.shadow[class*='-gray'] {
    box-shadow: var(--ShadowSize) var(--grayShadow);
}

.shadow[class*='-black'] {
    box-shadow: var(--ShadowSize) var(--blackShadow);
}

.shadow[class*='-white'] {
    box-shadow: var(--ShadowSize) var(--blackShadow);
}
